import {colorLuminance} from '@/libs/neumorphism'
import {ratio2color} from '@/libs/text2Color'
import {PropType} from 'vue'
import {DeviceName, IconImg} from '../image'
import RollerDigital from '../rollerDigital'
import {CnBoldSpan, CnNormalSpan} from '../text'
import WaterTarget from '../waterTarget'

const ConfigInofItem = defineComponent({
  props: {
    btnText: String,
    title: String,
    onClick: Function
  },
  setup(props, ctx) {
    return () => (
      <div class='h-42 flex justify-between items-center'>
        <div>
          <IconImg imgName='standard-sm' class='inline-block mr-10'></IconImg>
          <CnNormalSpan class='text-text'>{props.title || ''}</CnNormalSpan>
        </div>
        <a-button class='bg-primaryLight h-28' onClick={() => props.onClick && props.onClick()}>
          <CnNormalSpan class='text-primaryHalf cursor-pointer text-12'>
            {props.btnText || ''}
          </CnNormalSpan>
        </a-button>
      </div>
    )
  }
})

interface DeviceConfigByCardPropsDevData extends DataOverview.DeviceListData {}
export const DeviceConfigByCard = defineComponent({
  props: {
    devData: {
      type: Object as PropType<DeviceConfigByCardPropsDevData>,
      required: true
    }
  },
  setup(props, ctx) {
    return () => (
      <div class='w-full flex space-x-16'>
        <WaterTarget
          id={'deviceConfigInfo-' + props.devData.devId}
          radius={25}
          borderWidth={3}
          range={((props.devData.onlineTimeRatio || 0) / 100) * 360}
          borderColor={[
            ratio2color(props.devData.onlineTimeRatio),
            colorLuminance(ratio2color(props.devData.onlineTimeRatio), 0.1)
          ]}
          showDashed={false}
        >
          <RollerDigital
            class='text-15'
            endVal={props.devData.onlineTimeRatio}
            bold={false}
            style={{
              color: ratio2color(props.devData.onlineTimeRatio)
            }}
          ></RollerDigital>
        </WaterTarget>

        <div class='flex-1'>
          <div class='h-50 leading-50 space-x-8 flex items-center'>
            <DeviceName>{props.devData.devName}</DeviceName>
            <CnBoldSpan
              style={{
                color: ratio2color(props.devData.onlineTimeRatio)
              }}
            >
              {props.devData.devOnlineStatus}
            </CnBoldSpan>
          </div>
          <ConfigInofItem
            title={`标准设置` + (props.devData.standSetStatus || '未配置')}
            btnText='设置标准'
          ></ConfigInofItem>
          <ConfigInofItem
            title={`数据采集` + (props.devData.dataSetStatus || '未配置')}
            btnText='设置采集'
          ></ConfigInofItem>
          <ConfigInofItem
            title={`报警设置` + (props.devData.standSetStatus || '未配置')}
            btnText='设置报警'
          ></ConfigInofItem>
        </div>
      </div>
    )
  }
})
